<
<template>
  <div class="erwei">
    <div class="img" v-loading="loading">
      <img width="200px" height="200px" :src="qrImg" />
      <i class="mask" v-if="showQrMask" :style="maskBg" @click="updateQr"></i>
    </div>
    <p>
      <svg class="icon" aria-hidden="true">
        <use xlink:href="#icon-weixin"></use>
      </svg>
      <b>请使用手机微信扫码登入</b>
    </p>
  </div>
</template>

<script>
//引入socket.io
import socketIo from "socket.io-client";
//引入qrcode
import qrcode from "qrcode";
//引入api
import * as api from "@/api/users";
//引入成功和失败扫码遮罩图片
import invalidImg from "@/assets/img/invalidQr.png";
import scanSuccessImg from "@/assets/img/scancode.png";
import storage from "@/utils/storage";
export default {
  props: {
    storageUserInfo: {
      required: true,
    },
  },
  data() {
    return {
      //二维码图片
      qrImg: "",
      //是否显示遮罩
      showQrMask: false,
      //遮罩背景样式
      maskBg: { backgroundImage: `url(${scanSuccessImg})` }, //扫码成功
      loading: true, //二维码加载动画
    };
  },
  created() {
    //建立socket连接
    let io = socketIo("wss://chst.vip");
    //监听连接事件
    io.on("connectSuccess", async ({ sid }) => {
      storage.set("qf-sid", sid);
      this.getQrUrl(sid);
    });
    io.on("invalidCode", (data) => {
      // console.log(data);
      //展示遮罩
      this.showQrMask = true;
      //显示无效的二维码遮罩样式
      this.maskBg.backgroundImage = `url(${invalidImg})`;
    });
    //扫码成功
    io.on("scancodeSuccess", async ({ state, wechatCode, msg }) => {
      if (state) {
        //显示遮罩
        this.showQrMask = true;
        this.maskBg.backgroundImage = `url(${scanSuccessImg})`;
        //调用微信登入接口
        let res = await api.wechatLoginApi(wechatCode);
        console.log(res);
        if (res.data.state) {
          //将内容存到本地
          this.storageUserInfo(res.data);
          //跳转页面
          this.$router.push("/");
        }
      } else {
        console.error(msg);
      }
    });
  },
  methods: {
    async getQrUrl(sid) {
      //打开二维码加载动画
      this.loading = true;
      let res = await api.getQrCodeApi(sid);
      console.log(res);
      let { scanCodeUrl: qrcodeUrl } = res.data;
      qrcode.toDataURL(qrcodeUrl, (err, img) => {
        if (err) {
          throw err;
        }
        // console.log(img);
        this.qrImg = img;
        //关闭遮罩
        this.showQrMask = false;
        //关闭二维码加载动画
        this.loading = false;
      });
    },
    //更新二维码地址
    updateQr() {
      //获取本地存储的sid
      let sid = storage.get("qf-sid");
      // console.log("sid", sid);
      this.getQrUrl(sid);
    },
  },
};
</script>
<style lang="less" scoped>
.img {
  display: inline-block;
  position: relative;
  width: 200px;
  height: 200px;
}
img {
  position: absolute;
  left: 0;
}
.mask {
  width: 100%;
  height: 100%;
  opacity: 0.8;
  background-color: #fff;
  position: absolute;
  left: 0;
  background-size: 50%;
  background-repeat: no-repeat;
  background-position: 50%;
  cursor: pointer;
}
p {
  display: block;
  margin-block-start: 1em;
  margin-block-end: 1em;
  margin-inline-start: 0px;
  margin-inline-end: 0px;
}
</style>
